<template>
  <view class="mine">
    <view
      class="staging-top"
      :style="{
        width: '100%',
        height: '360rpx',
        background: `url(${seizeOrdersTop}) no-repeat center`,
        backgroundSize: 'cover',
      }"
    >
      <view class="nav-bar">
        <view class="nav-title">我的</view>
      </view>
      <view class="user-container">
        <view class="user-image">
          <u--image
            class="infor-image"
            :showLoading="true"
            :src="userImage"
            width="136rpx"
            height="136rpx"
          ></u--image>
        </view>
        <view
          class="user-status"
          @click="isLogin ? linkPersonalCenter() : linkLogin()"
        >
          {{ isLogin ? userInfor.nickname : "登录 / 注册" }}</view
        >
        <view class="open-infor" v-if="isLogin" @click="linkPersonalCenter()"
          ><u-icon name="arrow-right" color="#ffffff" size="14"></u-icon
        ></view>
      </view>
      <view class="income-infor">
        <view class="income-item">
          <view class="num"> {{ isLogin ? "A" : "-" }}</view>
          <view class="title">等级</view>
        </view>
        <view class="income-item" @click="linkMyWallet()">
          <view class="num">{{ isLogin ? "600.0" : "-" }}</view>
          <view class="title">钱包</view>
        </view>
        <view class="income-item">
          <view class="num">{{ isLogin ? "2" : "-" }}</view>
          <view class="title">技能</view>
        </view>
      </view>
    </view>
    <view class="item-container">
      <view class="item" @click="linkMyOrder()">
        <view class="image">
          <u--image
            class="infor-image"
            :showLoading="true"
            :src="orderIcon"
            width="48rpx"
            height="48rpx"
          ></u--image>
        </view>
        <view class="title">我的订单</view>
        <u-icon name="arrow-right" color="#CECECE" size="16"></u-icon>
      </view>
      <view class="item" @click="linkPersonalCenter()">
        <view class="image">
          <u--image
            class="infor-image"
            :showLoading="true"
            :src="personalCenterIcon"
            width="48rpx"
            height="48rpx"
          ></u--image>
        </view>
        <view class="title">个人中心</view>
        <u-icon name="arrow-right" color="#CECECE" size="16"></u-icon>
      </view>
      <view class="item" @click="linkWorkerSettlement()">
        <view class="image">
          <u--image
            class="infor-image"
            :showLoading="true"
            :src="workerIcon"
            width="48rpx"
            height="48rpx"
          ></u--image>
        </view>
        <view class="title">师傅入驻</view>
        <u-icon name="arrow-right" color="#CECECE" size="16"></u-icon>
      </view>
      <view class="item item-wallet" @click="linkMyWallet()">
        <view class="image">
          <u--image
            class="infor-image"
            :showLoading="true"
            :src="walletIcon"
            width="48rpx"
            height="48rpx"
          ></u--image>
        </view>
        <view class="title">我的钱包</view>
        <u-icon name="arrow-right" color="#CECECE" size="16"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import seizeOrdersTop from "@/static/images/seize_orders_top.png";
import userImage from "@/static/iconImages/user-image.png";
import orderIcon from "@/static/iconImages/order-icon.png";
import personalCenterIcon from "@/static/iconImages/personal-center-icon.png";
import walletIcon from "@/static/iconImages/wallet-icon.png";
import workerIcon from "@/static/iconImages/worker-icon.png";

export default {
  data() {
    return {
      seizeOrdersTop,
      userImage,
      orderIcon,
      personalCenterIcon,
      walletIcon,
      workerIcon,
      isLogin: false,
      userInfor: {},
    };
  },
  onShow() {
    const userInfor = uni.getStorageSync("userInfor")
      ? JSON.parse(uni.getStorageSync("userInfor"))
      : {};
    if (Object.keys(userInfor).length > 0) {
      this.userInfor = userInfor;
      this.isLogin = true;
    }
  },
  methods: {
    // 未登录跳转到登录页面
    linkLogin() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    //登录跳转到个人中心页面
    linkPersonalCenter() {
      uni.navigateTo({
        url: "/pages/personalCenter/index",
      });
    },
    // 跳转到我的订单页面
    linkMyOrder() {
      uni.navigateTo({
        url: "/pages/order/order",
      });
    },
    // 跳转到我的钱包
    linkMyWallet() {
      uni.navigateTo({
        url: "/pages/myWallet/index",
      });
    },
    // 跳转到师傅入驻
    linkWorkerSettlement() {
      uni.navigateTo({
        url: "/pages/workerSettlement/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mine {
  .staging-top {
    position: relative;
    .nav-bar {
      height: 88rpx;

      padding: 0 32rpx;
      display: flex;
      justify-content: space-between;
      .nav-title {
        color: #fff;
        text-align: center;
        flex: 1;
        font-weight: 700;
        font-size: 16px;
        line-height: 88rpx;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .user-container {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      .user-image {
      }
      .user-status {
        flex: 1;
        font-size: 36rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        line-height: 136rpx;
        margin-left: 28rpx;
      }
      .open-infor {
        margin-top: 58rpx;
      }
    }

    .income-infor {
      width: 96%;
      height: 100rpx;
      background: #ffffff;
      border-radius: 16rpx;
      position: absolute;
      bottom: -70rpx;
      left: 2%;
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0rpx;
      .income-item {
        text-align: center;
        width: 33.3%;
        .title {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #808080;
          line-height: 60rpx;
        }
        .num {
          font-size: 38rpx;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #353535;
          line-height: 52rpx;
        }
      }
    }
  }
  .item-container {
    margin: 96rpx 20rpx 20rpx 20rpx;
    padding: 0 22rpx;
    background: #ffffff;
    border-radius: 16rpx;
    .item {
      display: flex;
      justify-content: space-between;
      padding: 26rpx 0;
      border-bottom: 1rpx solid #eeeeee;
      .title {
        flex: 1;
        margin-left: 18rpx;
        font-size: 30rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #353535;
        line-height: 48rpx;
      }
    }
    .item-wallet {
      border-bottom: none;
    }
  }
}
</style>
